<template>
  <div class="login-container">
    <div class="login-bg">
      <div class="bg-overlay"></div>
      <div class="bg-text">
        <div class="logo">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
          >
            <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9z" />
            <path d="M12 3v18" />
            <path d="M17 12c-3.2-3-5.2-3-8.5-3" />
            <path d="M7 12c3.2 3 5.2 3 8.5 3" />
            <circle cx="12" cy="12" r="2" />
          </svg>
        </div>
        <h2>龙行天下集团管理系统</h2>
        <p>连接全球业务，赋能企业决策，引领数字化转型新浪潮</p>
      </div>
    </div>

    <div class="login-form">
      <div class="login-header">
        <h2>欢迎登录</h2>
        <p>请输入您的账号信息</p>
      </div>

      <div class="login-main">
        <el-form
          ref="loginForm"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="top"
          @keyup.enter="handleLogin"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="form.username"
              placeholder="请输入用户名"
              prefix-icon="User"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="handleLogin"
              :loading="loading"
              class="login-btn"
            >
              {{ loading ? "登录中..." : "登 录" }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="login-footer">
        <el-checkbox v-model="rememberMe">记住我</el-checkbox>
        <el-link type="primary" :underline="false">忘记密码?</el-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "../stores/auth";
import { ElMessage } from "element-plus";

const router = useRouter();
const authStore = useAuthStore();
const loginForm = ref(null);
const loading = ref(false);
const rememberMe = ref(false);

const form = reactive({
  username: "admin",
  password: "admin123",
});

const rules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
});

const handleLogin = () => {
  loginForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      authStore
        .login(form.username, form.password)
        .then(() => {
          ElMessage.success("登录成功");
          router.push({ name: "Dashboard" });
        })
        .catch((error) => {
          ElMessage.error(error.message || "登录失败");
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  background: linear-gradient(135deg, #1e5799 0%, #207cca 51%, #2989d8 100%);
}

.login-bg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(rgba(30, 87, 153, 0.8), rgba(30, 87, 153, 0.8)),
    url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1740&q=80")
      center / cover no-repeat;
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.bg-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: 0 40px;
  max-width: 600px;
}

.bg-text h2 {
  font-size: 2.5rem;
  margin: 20px 0;
  font-weight: 600;
  letter-spacing: 1px;
}

.bg-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
}

.logo {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  backdrop-filter: blur(5px);
}

.logo svg {
  width: 60px;
  height: 60px;
  stroke: white;
  stroke-width: 1.5;
}

.login-form {
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 40px;
  margin-top: -5%;
  background: white;
}

.login-header {
  text-align: center;
  margin-bottom: 10px;
}

.login-header h2 {
  font-size: 1.8rem;
  color: #1e5799;
  margin-bottom: 10px;
  font-weight: 600;
}

.login-header p {
  font-size: 1rem;
  color: #7a7f9a;
}

.login-main {
  width: 100%;
}

.login-main .el-form {
  width: 100%;
}

.login-main .el-form-item__label {
  font-weight: 500;
  margin-bottom: 6px;
}

.login-btn {
  margin-top: 10px;
  width: 100%;
  height: 45px;
  font-size: 1rem;
  font-weight: 500;
  background: linear-gradient(135deg, #1e5799 0%, #2989d8 100%);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(30, 87, 153, 0.3);
}

.login-footer {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 992px) {
  .login-bg {
    display: none;
  }

  .login-form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .login-form {
    padding: 0 30px;
  }

  .login-header h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .login-form {
    padding: 0 20px;
  }

  .login-header h2 {
    font-size: 1.5rem;
  }

  .login-footer {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}

/* 动画效果 */
.login-header,
.login-main,
.login-footer {
  animation: fadeIn 0.5s ease-out forwards;
}

.login-header {
  animation-delay: 0.1s;
}
.login-main {
  animation-delay: 0.2s;
}
.login-footer {
  animation-delay: 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>